<template>
  <div class="mx-4 w-[calc(100%-2rem)]">
    <div class="px-3 py-2 pt-3">
      <h4 class="font-medium">{{ $t("products.paymentMethod") }}</h4>
    </div>

    <van-form class="">
      <!-- 付款方式选择 -->
      <!-- <div class="mb-2 rounded-lg bg-white">
        <van-radio-group v-model="selectedMethod" @change="onPaymentMethodChange" class="bg-transparent">
          <van-cell-group class="bg-transparent">
            <van-cell
              class="bg-transparent"
              v-for="method in paymentMethods"
              :key="method.value"
              :title="$t(method.label)"
              clickable
              @click="selectedMethod = method.value">
              <template #right-icon>
                <van-radio :name="method.value" checked-color="#ff7a00" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div> -->

      <!-- 银行卡信息表单 -->
      <div class="rounded-lg bg-white">
        <van-field v-model="form.name" :label="$t('bankCard.name')" :placeholder="$t('bankCard.namePlaceholder')" />
        <van-field v-model="form.cardNo" :label="$t('bankCard.cardNo')" :placeholder="$t('bankCard.cardNoPlaceholder')" />
        <van-field
          v-model="form.expireDate"
          :label="$t('bankCard.expireDate')"
          :placeholder="$t('bankCard.expireDatePlaceholder')"
          readonly
          is-link
          @click="showDatePicker = true" />
        <van-field v-model="form.checksum" :label="$t('bankCard.checksum')" :placeholder="$t('bankCard.checksumPlaceholder')" />

        <!-- 保存银行卡信息选项 -->
        <!-- <div class="px-3 mt-3">
          <van-checkbox v-model="form.saveCard" class="text-sm" checked-color="#ff7a00">
            {{ $t("products.saveCardInfo") }}
          </van-checkbox>
        </div> -->
      </div>
    </van-form>

    <van-popup v-model="showDatePicker" position="bottom">
      <van-datetime-picker v-model="selectedDate" type="year-month" @confirm="onDateConfirm" @cancel="showDatePopup = false" />
    </van-popup>
  </div>
</template>

<script>
import { Form, Checkbox, RadioGroup, CellGroup, Radio, Popup, DatetimePicker } from "vant"
export default {
  name: "PaymentMethod",
  components: {
    [Form.name]: Form,
    [Checkbox.name]: Checkbox,
    [RadioGroup.name]: RadioGroup,
    [CellGroup.name]: CellGroup,
    [Radio.name]: Radio,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
  },
  data() {
    return {
      selectedMethod: "creditCard",
      paymentMethods: [
        { value: "creditCard", label: "products.creditCard" },
        { value: "onlineBanking", label: "products.onlineBanking" },
        { value: "eWallet", label: "products.eWallet" },
      ],
      form: {},
      showDatePicker: false,
      selectedDate: new Date(),
    }
  },
  props: {
    bankInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    bankInfo: {
      handler(newVal) {
        // console.log("addressData :>> ", newVal)
        this.form = newVal
      },
      deep: true,
    },
  },
  methods: {
    onPaymentMethodChange(value) {
      this.selectedMethod = value
      this.$emit("payment-method-change", {
        method: value,
        form: value === "creditCard" ? this.form : null,
      })
    },
    selectPaymentMethod(method) {
      this.selectedMethod = method
      this.$emit("payment-method-change", {
        method: method,
        form: method === "creditCard" ? this.form : null,
      })
    },
    getPaymentData() {
      return {
        method: this.selectedMethod,
        form: this.form,
      }
    },
    validatePayment() {
      const { name, cardNo, expireDate, checksum } = this.form
      return name && cardNo && expireDate && checksum
    },
    // 日期确认
    onDateConfirm(value) {
      const year = value.getFullYear()
      const month = String(value.getMonth() + 1).padStart(2, "0")
      this.form.expireDate = `${year}-${month}`
      this.showDatePicker = false
    },
  },
  mounted() {
    // 初始化时发送默认选择
    this.selectPaymentMethod(this.selectedMethod)
  },
}
</script>

<style scoped>
/deep/.van-cell {
  background-color: transparent;
}
</style>
